<template>
  <div>
      <div class="i-layout-page-header">
          <PageHeader class="product_tabs" title="卡包领取记录" hidden-breadcrumb></PageHeader>
      </div>
      <Card :bordered="false" dis-hover class="ivu-mt">
          <Form ref="tableFrom" :model="tableFrom"  :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
              <Row type="flex" :gutter="24">
                  <Col v-bind="grid">
                      <FormItem label="是否有效：" >
                          <Select  placeholder="请选择" clearable v-model="tableFrom.status" @on-change="userSearchs">
                              <Option value="1">已使用</Option>
                              <Option value="2">已过期</Option>
                              <Option value="-1">未使用</Option>
                          </Select>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                      <FormItem label="获取方式：" >
                          <Select  placeholder="请选择" clearable v-model="tableFrom.get_type" @on-change="userSearchs">
                              <Option value="1">会员等级发送</Option>
                              <Option value="2">手动领取</Option>
                              <Option value="3">抽奖</Option>
                              <Option value="4">后台发放</Option>
                              <Option value="5">沉睡顾客</Option>
                              <Option value="6">消费邀新奖励</Option>
                              <Option value="7">社群邀新奖励</Option>
                              <Option value="8">下单赠送</Option>
                              <Option value="9">生日卡</Option>
                              <Option value="10">核销奖励</Option>
                              <Option value="11">年终回馈</Option>
                          </Select>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid" v-if="tableFrom.get_type == 11">
                      <FormItem label="消费级别：" >
                          <Select  placeholder="请选择" clearable v-model="tableFrom.level" @on-change="userSearchs">
                              <Option v-for="(item,index) in consumeListApi" :key="index" :value="item.grade">{{ item.name }}</Option>
                          </Select>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                      <FormItem label="卡包类型：" >
                          <Select  placeholder="请选择" clearable v-model="tableFrom.issue_type" @on-change="userSearchs">
                              <Option value="1">权益卡包</Option>
                              <Option value="2">闺蜜卡包</Option>
                          </Select>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                      <FormItem label="领取人：" label-for="nickname">
                          <Input  placeholder="请输入领取人" v-model="tableFrom.nickname" clearable/>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                      <FormItem label="卡包搜索：" label-for="title">
                          <Input search enter-button placeholder="请输入卡包名称" v-model="tableFrom.title" @on-search="userSearchs"/>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                      <FormItem label="手机号搜索：" label-for="title">
                          <Input search enter-button placeholder="请输入手机号" v-model="tableFrom.phone" @on-search="userSearchs"/>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                      <FormItem label="用户状态：" >
                          <Select  placeholder="请选择" clearable v-model="tableFrom.user_status" @on-change="userSearchs">
                              <Option value="1">新注册</Option>
                              <Option value="2">未到院</Option>
                              <Option value="3">已到院</Option>
                          </Select>
                      </FormItem>
                  </Col>
                  <Col v-bind="grid">
                        <FormItem label="访问时间：" label-for="add_time">
                            <!--<DatePicker clearable @on-change="onchangeTime" v-model="timeVal" :value="timeVal"  format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择时间" v-width="'100%'"></DatePicker>-->
                            <DatePicker
                                    :editable="false"
                                    @on-change="onchangeTime"
                                    :value="timeVal"
                                    format="yyyy/MM/dd"
                                    type="daterange"
                                    placement="bottom-start"
                                    placeholder="自定义时间"
                                    style="width: 200px"
                                    class="mr20"
                                    :options="options"
                            ></DatePicker>
                        </FormItem>
                        <!-- <FormItem label="时间选择：">
                            <DatePicker
                                :editable="false"
                                @on-change="onchangeTime"
                                :value="timeVal"
                                format="yyyy/MM/dd"
                                type="daterange"
                                placement="bottom-end"
                                placeholder="自定义时间"
                                style="width: 200px"
                            ></DatePicker>
                        </FormItem> -->
                   </Col>
                  <Button class="ml10" @click="exports">导出</Button>
              </Row>
          </Form>
          <Table :columns="columns1" :data="tableList">
              <template slot-scope="{ row, index }" slot="level">
                    <span v-if="row.level == 1">普通会员</span>
                    <span v-if="row.level == 2">银卡</span>
                    <span v-if="row.level == 3">金卡</span>
                    <span v-if="row.level == 4">铂金卡</span>
                    <span v-if="row.level == 5">钻石卡</span>
                    <span v-if="row.level == 6">翡翠卡</span>
                    <span v-if="row.level == 7">V卡</span>
              </template>
              <template slot-scope="{ row, index }" slot="is_fail">
                  <Icon type="md-checkmark" v-if="row.is_fail === 0" color="#0092DC" size="14"/>
                  <Icon type="md-close" v-else color="#ed5565" size="14"/>
              </template>
              <template slot-scope="{ row, index }" slot="phone">
                    <div v-if="row.level>1">{{ row.phone.slice(0, -3) }}***</div>
                    <div v-else>{{ row.phone }}</div>
              </template>
              <template slot-scope="{ row, index }" slot="_begin_time">
                  <span> {{row._begin_time | formatDate}}</span>
              </template>
              <template slot-scope="{ row, index }" slot="_end_time">
                  <span> {{row._end_time | formatDate}}</span>
              </template>
              <template slot-scope="{ row, index }" slot="_use_time">
                  <span> {{row._use_time || "未使用"}}</span>
              </template>
              <template slot-scope="{ row, index }" slot="setUp" v-if="!row._use_time && row.status!=2">
                    <a @click="couponDel(row, '核销卡包', index)">核销</a>
              </template>
          </Table>
          <div class="acea-row row-right page">
              <!-- <Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"/> -->
              <Page
                :total="page.total"
                :current="page.pageNum"
                show-elevator
                show-total
                @on-change="pageChange"
                :page-size="page.pageSize"
                @on-page-size-change="limitChange"
                show-sizer
                />
          </div>
      </Card>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import { userListApi,usedListLog,cardpackToused } from '@/api/marketing';
  import { formatDate } from '@/utils/validate';
  import { cardPackUser } from "@/api/order";
  import { vipListConsume } from "@/api/user";
  import exportExcel from "@/utils/newToExcel.js";
  export default {
      name: 'storePackageRecord',
    //   filters: {
    //       formatDate (time) {
    //           if (time !== 0) {
    //               let date = new Date(time * 1000);
    //               return formatDate(date, 'yyyy-MM-dd hh:mm');
    //           }
    //       }
    //   },
      data () {
          return {
              columns1: [
                  {
                      title: 'ID',
                      key: 'id',
                      width: 80
                  },
                  {
                      title: '卡包名称',
                      key: 'title',
                      minWidth: 130
                  },
                  {
                      title: '领取人',
                      key: 'nickname',
                      minWidth: 130
                  },
                  {
                      title: '姓名',
                      key: 'real_name',
                      minWidth: 110
                  },
                  {
                      title: '联系电话',
                      slot: 'phone',
                      minWidth: 130
                  },
                  {
                      title: '用户等级',
                      slot: 'level',
                      minWidth: 100
                  },
                  {
                    title: "隶属人",
                    key: "adviser_name",
                    minWidth: 100,
                  },
                  {
                      title: '领取时间',
                      key: '_add_time',
                      minWidth: 150
                  },
                //   {
                //       title: '面值',
                //       key: 'coupon_price',
                //       minWidth: 100
                //   },
                //   {
                //       title: '最低消费额',
                //       key: 'use_min_price',
                //       minWidth: 120
                //   },

                  {
                      title: '获取方式',
                      key: 'get_type',
                      minWidth: 120
                  },
                //   {
                //       title: '是否可用',
                //       slot: 'is_fail',
                //       minWidth: 120
                //   },
                  {
                      title: '是否使用',
                      key: 'status_text',
                      minWidth: 100
                  },
                  {
                    title: "用户状态",
                    key: "user_status",
                    minWidth: 100,
                  },
                  {
                    title: "渠道",
                    key: "know_way",
                    minWidth: 130,
                  },
                 
                  
                //   {
                //       title: '开始使用时间',
                //       slot: '_begin_time',
                //       minWidth: 150
                //   },
                //   {
                //       title: '结束使用时间',
                //       slot: '_end_time',
                //       minWidth: 150
                //   },
                  {
                      title: '核销时间',
                      slot: '_use_time',
                      minWidth: 150
                  },
                  {
                    title: "分享人号码",
                    key: "invite_phone",
                    minWidth: 100,
                  },
                  {
                      title: '设置',
                      slot: 'setUp',
                      fixed: "right",
                      minWidth: 150
                  }
              ],
              tableList: [],
              grid: {
                  xl: 7,
                  lg: 7,
                  md: 12,
                  sm: 24,
                  xs: 24
              },
              tableFrom: {
                  status: '',
                  title: '',
                  nickname: '',
                  phone: '',
                  user_status:'',
                  add_time:'',
                  get_type:'',
                  issue_type:'',
                  level: '',
                //   page: 1,
                //   limit: 15
              },
              page: {
                    total: 0, // 总条数
                    pageNum: 1, // 当前页
                    pageSize: 10, // 每页显示条数
                },
              total: 0,
              timeVal: [],
              consumeListApi: [],
              options: {
              shortcuts: [
                        {
                            text: "今天",
                            value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                new Date(
                                new Date().getFullYear(),
                                new Date().getMonth(),
                                new Date().getDate()
                                )
                            );
                            return [start, end];
                            },
                        },
                        {
                            text: "昨天",
                            value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.setTime(
                                new Date(
                                    new Date().getFullYear(),
                                    new Date().getMonth(),
                                    new Date().getDate() - 1
                                )
                                )
                            );
                            end.setTime(
                                end.setTime(
                                new Date(
                                    new Date().getFullYear(),
                                    new Date().getMonth(),
                                    new Date().getDate() - 1
                                )
                                )
                            );
                            return [start, end];
                            },
                        },
                        {
                            text: "最近7天",
                            value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.setTime(
                                new Date(
                                    new Date().getFullYear(),
                                    new Date().getMonth(),
                                    new Date().getDate() - 6
                                )
                                )
                            );
                            return [start, end];
                            },
                        },
                        {
                            text: "最近30天",
                            value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.setTime(
                                new Date(
                                    new Date().getFullYear(),
                                    new Date().getMonth(),
                                    new Date().getDate() - 29
                                )
                                )
                            );
                            return [start, end];
                            },
                        },
                        {
                            text: "本月",
                            value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.setTime(
                                new Date(new Date().getFullYear(), new Date().getMonth(), 1)
                                )
                            );
                            return [start, end];
                            },
                        },
                        {
                            text: "本年",
                            value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.setTime(new Date(new Date().getFullYear(), 0, 1))
                            );
                            return [start, end];
                            },
                        },
                    ],
                },
            }
        },
      computed: {
          ...mapState('admin/layout', [
              'isMobile'
          ]),
          labelWidth () {
              return this.isMobile ? undefined : 90;
          },
          labelPosition () {
              return this.isMobile ? 'top' : 'right';
          }
      },
      created () {
          this.getList();
          this.getListConsume();
      },
      methods: {
        getListConsume() {
            vipListConsume().then((res) => {
                this.consumeListApi = res.data.list
            });
        },
        // 删除
        couponDel(row, tit, num) {
            console.log(row, tit, num)
            let delfromData = {
                title: tit,
                num: num,
                success: cardpackToused(row.id),
            };
            this.$modalSure(delfromData)
            .then((res) => {
            this.$Message.success(res.msg);
            console.log(66666)
                this.getList();
                })
            .catch((res) => {
                this.$Message.error(res.msg);
                });
        },
        // 具体日期
        // onchangeTime(e) {
        //     this.timeVal = e;
        //     this.tableFrom.add_time = this.timeVal[0] ? this.timeVal.join("-") : "";
        //     this.page.pageNum = 1;
        //     this.getList();
        // },
        // 具体日期
          onchangeTime(e) {
            this.timeVal = e;
            this.tableFrom.add_time = this.timeVal.join("-");
            this.page.pageNum = 1;
            this.getList();
          },
          // 列表
          getList () {
              this.loading = true;
              this.tableFrom.status = this.tableFrom.status || '';
              usedListLog({
                page: this.page.pageNum,
                limit: this.page.pageSize,
                status: this.tableFrom.status,
                user_status: this.tableFrom.user_status,
                title: this.tableFrom.title,
                nickname: this.tableFrom.nickname,
                phone: this.tableFrom.phone,
                add_time: this.tableFrom.add_time,
                get_type: this.tableFrom.get_type,
                issue_type: this.tableFrom.issue_type,
                level: this.tableFrom.level,
                // type: this.orderType === 0 ? "" : this.orderType,
                // product_id: this.$route.query.product_id,
              }).then(async res => {
                  let data = res.data
                  this.tableList =  data.list;
                  this.page.total = data.count;
                  this.loading = false;
              }).catch(res => {
                  this.loading = false;
                  this.$Message.error(res.msg);
              })
          },
          pageChange (index) {
              this.page.pageNum = index;
              this.getList();
          },
          limitChange(limit) {
            this.page.pageSize = limit;
            this.getList();
          },
          // 表格搜索
          userSearchs () {
              this.page.pageNum = 1;
              this.getList();
          },
          async exports() {
            let [th, filekey, data, fileName] = [[], [], [], ""];
            let excelData = JSON.parse(JSON.stringify(this.tableFrom));
            console.log(this.tableFrom,"1111")
            excelData.page = 1;
            excelData.product_id= this.$route.query.product_id || "";
            for (let i = 0; i < excelData.page + 1; i++) {
                let lebData = await this.getExcelData(excelData);
                if (!fileName) fileName = lebData.filename;
                if (!filekey.length) {
                filekey = lebData.filekey;
                }
                if (!th.length) th = lebData.header;
                if (lebData.export.length) {
                    data = data.concat(lebData.export);
                    excelData.page++;
                }
                // else {
                //     break; // 如果 lebData.export.length 为空，则结束循环
                // }
            }
            exportExcel(th, filekey, fileName, data);
            },
            getExcelData(excelData) {
                return new Promise((resolve, reject) => {
                    cardPackUser(excelData).then((res) => {
                    return resolve(res.data);
                    });
                });
            },
        }
  }
</script>

<style scoped>

</style>
